<template>
    <div class='mainChild'>
        <img :src="returnImg" class="returnImg" @click="returns"/>
        <div class='titles2'>
            {{title}}
        </div>
        <div class='content'>
            <div class='item' v-for="(item,index) in children" :key="index" >
                <div class='item_1' :style="{'backgroundImage':item.bg}" @click="openWin(item)">
                    <div class='item_text'>
                        {{item.text}}
                    </div>
                    <div class='item_icon'>

                        <i :class='item.fa'></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            children:[],
            title:"",
            sCode:"",
            returnImg:""
        }
    },
    created(){
        this.sCode=localStorage.getItem("sCode");
        this.children= JSON.parse(this.$route.query.children);
        this.title= this.$route.query.title;
        let sef=this;
        //window.setTimeout(function(){
        try{
             document.getElementsByClassName("mainChild")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/daping2.jpg')"
        }catch(e){}
             
        //},1000)

        for(let i=0;i<this.children.length;i++){
            let children_=this.children[i];
            children_.bg="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/modd.png')";
        }
        this.returnImg=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/return.png";
        console.log(this.children)
        var html =document.querySelector('html');
        html.style.fontSize = document.documentElement.clientWidth/10+'px';
    },
    mounted(){
        let sef=this;
        //window.setTimeout(function(){
             document.getElementsByClassName("mainChild")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/daping2.jpg')"
       // },1000)
    },
    methods:{
        returns(){
            this.$router.go(-1);
        },
        openWin(item){
            console.log("item===================================");
            console.log(item)
            this.$router.push({path:item.url,query:{filename:item.filename,title:item.name,appid:item.appid,dbModelKey:item.dbModelkey,model:item.model,key:item.key}});
        }
    }
}
</script>
<style scoped>
    .mainChild{
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
        align-items:center;

    }
    .titles2{
        height:10%;
        text-align:center;
        width:100%;
        color:#fff;
        font-size:0.25rem;
        font-family: PingFangSC-Regular, PingFang SC;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        font-family:"经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
       
        text-shadow: 0 8px 9px #0f184a, 0px -2px 1px #fff;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: center;
       
    }
    .content{
        flex:1;
        width:80%;
        display:flex;
        flex-direction: row;
        justify-content: center;
    }
    .item{
        width:30%;
        text-align:center;
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
    }
    .item_1{
        
        font-family:"经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width:90%;
        height:50%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        cursor:pointer;
        text-shadow: 0 8px 9px #0f184a, 0px -2px 1px #fff;
        font-weight: bold;
        letter-spacing: 4px;
    }
    .item_text{
        color:#fff;
        height:50%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        font-size:0.12rem;
    }
    .item_icon{
        color:#fff;
        font-size:0.6rem;
        flex:1;
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
    .returnImg{
        position: absolute;
        right:5%;
        top:5%;
        width:1rem;
        cursor:pointer;
    }
</style>